import React, { Component } from 'react'

export default class Comp extends Component {

    constructor(props) {
        super(props)
        // this.txtRef = React.createRef()
    }

    componentDidMount() {
        console.log('didmount', this.txtRef);
    }

    handleClick = () => {
        this.txtRef.focus()
        this.setState({})
    }

    getRef = el => {
        console.log('函数被调用了');
        this.txtRef = el;
        // this.txtRef.focus();
        // this.txtRef.value = "hello world";
        // this.txtRef.style.color = "red";
        // this.txtRef.style.fontSize = "30px";
        // this.txtRef.style.backgroundColor = "yellow";
        // this.txtRef.style.border = "1px solid black";
        // this.txtRef.style.padding = "10px";
        // this.txtRef.style.margin = "10px";
        // this.txtRef.style.borderRadius = "10px";
        // this.txtRef.style.outline = "none";
        // this.txtRef.style.boxShadow = "0 0 10px #ccc";
        // this.txtRef.style.transition = "all 0.5s";
        // this.txtRef.style.transform = "scale(1.1)";
        // this.txtRef.style.transformOrigin = "center";
        // this.txtRef.style.cursor = "pointer";
    }

    render() {
        return (
            <div>
                {/* <input type="text" ref={this.txtRef} /> */}
                <input type="text" ref={this.getRef} />
                <button onClick={this.handleClick}>聚焦</button>
            </div>
        )
    }
}
